<!--
 * @Description: 通货卡片组件
 * @Date: 2025-10-10
-->
<template>
  <view class="currency-card" @tap="handleTap">
    <view class="card-header">
      <image 
        class="currency-icon" 
        :src="currency.icon_url" 
        mode="aspectFit"
        @error="handleImageError"
      />
      <view class="currency-info">
        <view class="currency-name">{{ currency.name }}</view>
        <view class="currency-id">{{ currency._id }}</view>
        <view class="currency-rarity" :class="rarityClass">{{ rarityText }}</view>
      </view>
      <view class="trend-badge" :class="currency.price.trend">
        <text class="trend-icon">{{ trendIcon }}</text>
        <text class="trend-text">{{ trendText }}</text>
      </view>
    </view>

    <view class="price-section">
      <view class="price-main">
        <text class="price-label">1元 = </text>
        <text class="price-value">{{ formattedPrice }}</text>
        <text class="price-unit">个</text>
      </view>
      <view class="price-change" :class="currency.price.trend">
        {{ formattedChange }}
      </view>
    </view>

    <view class="recommendation" v-if="showRecommendation">
      <text class="rec-label">建议：</text>
      <text class="rec-action" :class="recommendationClass">{{ recommendation }}</text>
    </view>

    <u-line-progress 
      v-if="showProgress"
      :percent="progressPercent" 
      :active-color="progressColor"
      inactive-color="#f0f0f0"
      height="4"
    />
  </view>
</template>

<script>
import { formatPrice, formatChangePercent, getTrendIcon, getCurrencyRarity, getRecommendedAction } from '../../utils/currency.js';

export default {
  name: 'CurrencyCard',
  props: {
    currency: {
      type: Object,
      required: true
    },
    showRecommendation: {
      type: Boolean,
      default: true
    },
    showProgress: {
      type: Boolean,
      default: false
    }
  },
  
  computed: {
    formattedPrice() {
      return formatPrice(this.currency.price.cny_rate);
    },
    
    formattedChange() {
      return formatChangePercent(this.currency.price.change_percent);
    },
    
    trendIcon() {
      return getTrendIcon(this.currency.price.trend);
    },
    
    trendText() {
      const textMap = {
        up: '上涨',
        down: '下跌',
        stable: '稳定'
      };
      return textMap[this.currency.price.trend] || '稳定';
    },
    
    rarityClass() {
      return `rarity-${getCurrencyRarity(this.currency.price.cny_rate)}`;
    },
    
    rarityText() {
      const textMap = {
        legendary: '传奇',
        rare: '稀有',
        uncommon: '不常见',
        common: '常见'
      };
      return textMap[getCurrencyRarity(this.currency.price.cny_rate)] || '常见';
    },
    
    recommendation() {
      return getRecommendedAction(this.currency);
    },
    
    recommendationClass() {
      const action = this.recommendation;
      if (action.includes('买入')) {
        return 'rec-buy';
      } else if (action.includes('出售')) {
        return 'rec-sell';
      } else {
        return 'rec-hold';
      }
    },
    
    progressPercent() {
      // 基于价格变化计算进度条
      const change = Math.abs(this.currency.price.change_percent);
      return Math.min(change * 2, 100);
    },
    
    progressColor() {
      const trend = this.currency.price.trend;
      const colorMap = {
        up: '#f56c6c',
        down: '#67c23a',
        stable: '#909399'
      };
      return colorMap[trend] || '#909399';
    }
  },
  
  methods: {
    handleTap() {
      this.$emit('tap', this.currency);
    },
    
    handleImageError() {
      console.log('图片加载失败:', this.currency.name);
      // 可以设置默认图片
    }
  }
}
</script>

<style lang="scss" scoped>
.currency-card {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, #f4c242 0%, #f093fb 100%);
  }
}

.card-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25rpx;
}

.currency-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
  border: 2rpx solid #f0f0f0;
}

.currency-info {
  flex: 1;
}

.currency-name {
  font-size: 34rpx;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8rpx;
}

.currency-id {
  font-size: 24rpx;
  color: #909399;
  margin-bottom: 8rpx;
}

.currency-rarity {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  display: inline-block;
  
  &.rarity-legendary {
    background: rgba(255, 165, 0, 0.1);
    color: #ff8c00;
    border: 1rpx solid rgba(255, 165, 0, 0.3);
  }
  
  &.rarity-rare {
    background: rgba(138, 43, 226, 0.1);
    color: #8a2be2;
    border: 1rpx solid rgba(138, 43, 226, 0.3);
  }
  
  &.rarity-uncommon {
    background: rgba(34, 139, 34, 0.1);
    color: #228b22;
    border: 1rpx solid rgba(34, 139, 34, 0.3);
  }
  
  &.rarity-common {
    background: rgba(128, 128, 128, 0.1);
    color: #808080;
    border: 1rpx solid rgba(128, 128, 128, 0.3);
  }
}

.trend-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx;
  border-radius: 12rpx;
  min-width: 80rpx;
  
  &.up {
    background: rgba(245, 108, 108, 0.1);
    border: 1rpx solid rgba(245, 108, 108, 0.3);
  }
  
  &.down {
    background: rgba(103, 194, 58, 0.1);
    border: 1rpx solid rgba(103, 194, 58, 0.3);
  }
  
  &.stable {
    background: rgba(144, 147, 153, 0.1);
    border: 1rpx solid rgba(144, 147, 153, 0.3);
  }
}

.trend-icon {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
  
  .up & { color: #f56c6c; }
  .down & { color: #67c23a; }
  .stable & { color: #909399; }
}

.trend-text {
  font-size: 20rpx;
  
  .up & { color: #f56c6c; }
  .down & { color: #67c23a; }
  .stable & { color: #909399; }
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.price-main {
  display: flex;
  align-items: baseline;
  flex: 1;
}

.price-label {
  font-size: 28rpx;
  color: #606266;
}

.price-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #303133;
  margin: 0 8rpx;
}

.price-unit {
  font-size: 28rpx;
  color: #606266;
}

.price-change {
  font-size: 28rpx;
  font-weight: bold;
  padding: 10rpx 20rpx;
  border-radius: 25rpx;
  
  &.up {
    background: rgba(245, 108, 108, 0.1);
    color: #f56c6c;
  }
  
  &.down {
    background: rgba(103, 194, 58, 0.1);
    color: #67c23a;
  }
  
  &.stable {
    background: rgba(144, 147, 153, 0.1);
    color: #909399;
  }
}

.recommendation {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.rec-label {
  font-size: 24rpx;
  color: #909399;
  margin-right: 10rpx;
}

.rec-action {
  font-size: 26rpx;
  font-weight: bold;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  
  &.rec-buy {
    background: rgba(103, 194, 58, 0.1);
    color: #67c23a;
  }
  
  &.rec-sell {
    background: rgba(245, 108, 108, 0.1);
    color: #f56c6c;
  }
  
  &.rec-hold {
    background: rgba(144, 147, 153, 0.1);
    color: #909399;
  }
}
</style>